{extend name="../../../view/public/base" /}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">

            <!--列表区域-->
            <div class="layui-card">
                <table id="currentTableId" lay-filter="currentTableFilter"></table>

                <!--工具栏-->
                <script type="text/html" id="listToolbar">
                    <a class="layui-btn layui-btn-sm" lay-event="add" title="添加应用">添加应用</a>
                </script>

                <script type="text/html" id="status">
                    {{#  if(d.status == 1){ }}
                    启用
                    {{#  } else if(d.status == 2) { }}
                    禁用
                    {{#  } else { }}
                    未安装
                    {{#  } }}
                </script>

                <script type="text/html" id="currentTableBar">
                    {{#  if(d.status == 1){ }}
                    <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">配置</a>
                    <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="changeStatus">禁用</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="uninstall">卸载</a>
                    {{#  } else if(d.status == 2) { }}
                    <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">配置</a>
                    <a class="layui-btn layui-btn-xs" lay-event="changeStatus">启用</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="uninstall">卸载</a>
                    {{#  } else { }}
                    <a class="layui-btn layui-btn-xs" lay-event="install" lay-event="install">安装</a>
                    {{#  } }}
                </script>
            </div>
        </div>
    </div>
    {/block}

    {block name="js"}
    <script>
        var edit_index;
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            table.render({
                elem: '#currentTableId',
                url: '/manage/miniapp/index',
                toolbar: '#listToolbar',
                cols: [[
                    {field: 'name', title: '应用名称', minWidth: 120},
                    {field: 'title', title: '应用类型', width: 120},
                    {field: 'types', title: '应用方式', width: 120},
                    {field: 'is_openapp', title: '应用方式', width: 120},
                    {field: 'price', title: '开通价格', width: 120},
                    {field: 'version', title: '版本', width: 120},
                    {field: 'status', title: '状态', width: 80, sort: true, templet: '#status'},
                    {title: '操作', width: 200, toolbar: '#currentTableBar', fixed: "right"}
                ]],
                response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                },
                parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data.data.list //解析数据列表
                    };
                }
            });

            //监听表格头部工具栏事件
            table.on('toolbar(currentTableFilter)', function (obj) {
                switch (obj.event) {
                    case 'add':
                        layer.msg('添加');
                        break;
                }
            });

            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;

                if (obj.event === 'install') { //安装
                    layer.confirm('确认安装?', function (index) {
                        //TODO 发起ajax请求
                        layer.close(index);
                    });
                } else if (obj.event === 'uninstall') {
                    layer.confirm('确认卸载?', function (index) {
                        //TODO 发起ajax请求
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') { //编辑
                    edit_index = layer.open({
                        title: '修改配置',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        area: ['50%', '90%'],
                        content: "{:Url('edit')}?id=" + data.id,
                    });
                    /*$(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;*/
                } else if (obj.event === 'changeStatus') {
                    layer.confirm(((data.status == 1) ? '确认禁用?' : '确认启用?'), function (index) {
                        //TODO 发起ajax请求
                        // 同步更新缓存对应的值
                        /*obj.update({
                            username: '123'
                            ,title: 'xxx'
                        });*/

                        var to_status = (data.status == 1) ? 2 : 1;
                        obj.update({
                            status: to_status
                        });
                        layer.close(index);
                    });
                }
            });

        });

        function reload() {
            window.location.reload()
        }
    </script>
    {/block}